<template>
  <view class="console-action-container">
    <view class="console-action-box">
      <view v-for="(item, index) in options" :key="index" :index="index" class="action-item-wrap" @click="handleClickAction(item)">
        <view class="image-wrap">
          <image :src="item.image" class="image" />
        </view>
        <text class="text">{{ item.name }}</text>
      </view>
      <view class="action-item-wrap-empty"></view>
      <view class="action-item-wrap-empty"></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default() {
        // [{link,name}]
        return [];
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    // handleClickAction(e) {
    //   let index = e.detail.index;
    //   let action = this.options[index];
    //   this.$goto(action.link);
    // },
    handleClickAction(item) {
      console.log(item, this.options);

      this.$goto(item.link);
    }
  }
};
</script>

<style scoped lang="scss">
$itemMarginTop: 30rpx;
$actionBoxPadding: 15rpx;
.console-action-container {
  margin-top: 70rpx;
  padding: 0 30rpx;
}

.console-action-box {
  background-color: #ffffff;
  padding: 0 $actionBoxPadding;
  padding-bottom: $itemMarginTop;
  border-radius: $uni-border-radius-lg;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  .action-item-wrap-empty {
    height: 0;
    width: 25%;
  }
  .action-item-wrap {
    height: 100%;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    // margin-top: $itemMarginTop;
    margin-top: $itemMarginTop;
    .image-wrap {
      width: 70rpx;
      height: 70rpx;
      .image {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      font-size: 24rpx;
      margin-top: 20rpx;
    }
  }
}
</style>
